<template>
  <div class="detail">
    <div class="md-1">
      <div class="content">
        <div class="top">
          <el-button type="primary" @click="goback"> 返回</el-button>

          <span style="color: #1ab700" v-if="chooseLiData.process == 100">
            恭喜你！你已完成本章课程
          </span>
          <span style="color: #ccc" v-if="chooseLiData.process != 100">
            距离完成课程还剩
            <countdown
              ref="countdown"
              style="color: rgb(220, 122, 0)"
              :initialTime="duration"
              @ok="addPro"
            >
            </countdown>
            秒
          </span>
        </div>
        <div class="playArea">
          <div class="left">
            <!-- <iframe width="100%" height="100%" :src="url" frameborder="0"></iframe> -->

            <video
              ref="video"
              controls
              v-if="
                chooseLiData.type == 'video/mp4' ||
                chooseLiData.type == 'video/mp3'
              "
              autoplay
              style="width: 100%; height: 100%"
              @ratechange="onRateChange"
            >
              <source :src="chooseLiData.url" type="video/mp4" />
            </video>
            <h1
              v-if="chooseLiData.type == 'video/mp3'"
              style="
                color: #fff;
                font-size: 40px;
                width: 100%;
                text-align: center;
                text-align: center;
                position: absolute;
                top: 50px;
                left: 0;
              "
            >
              MP3播放
            </h1>

            <img
              v-if="chooseLiData.type == 'img'"
              autoplay
              style="width: 100%"
              :src="chooseLiData.url"
            />

            <iframe
              v-if="chooseLiData.type == 'ifram'"
              :src="chooseLiData.url"
              width="100%"
              height="100%"
              frameborder="0"
            ></iframe>
          </div>

          <div class="right">
            <ul>
              <li
                v-for="(item, idx) in detailData.temsCourseChapterList"
                :class="item.name == chooseLiData.name ? 'act' : ''"
                @click="chooseLi(item)"
                :key="item.id"
              >
                <i
                  class="el-icon-video-play"
                  style="float: left; font-size: 20px; margin-right: 15px"
                ></i>
                <div class="p">
                  {{ idx + 1 }}.
                  {{ item.name }}
                </div>

                <div class="p2">
                  <span> {{ item.type }} </span>
                  <span style="margin-left: 30px">
                    进度: {{ item.process || 0 }}%
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="md-2">
      <div class="content2">
        <div class="title">
          <h1 style="float: left">{{ detailData.name }}</h1>
          <span style="margin-left: 20px; font-size: 18px; color: #999">
            ({{ detailData.temsCourseChapterList.length }}课程)
          </span>
          <span style="margin-left: 20px; color: #2a8ff7">
            <span
              v-if="detailData.favoriteFlag"
              @click="handleStarClick('favorite')"
              class="icon-ym icon-ym-extend-star"
            ></span>
            <span
              v-else
              @click="handleStarClick('favorite')"
              class="icon-ym icon-ym-extend-star-o"
            ></span>
          </span>
          <span style="margin-left: 10px; color: #2a8ff7">
            <span
              v-if="detailData.likeFlag"
              @click="handleStarClick('like')"
              class="ym-custom ym-custom-heart"
            ></span>
            <span
              v-else
              @click="handleStarClick('like')"
              class="ym-custom ym-custom-heart-outline"
            ></span>
          </span>
        </div>

        <div class="title" style="margin-top: 20px">
          <h1 style="float: left; font-size: 30px; color: #f5961b">
            {{ detailData.starScore || 5 }} 分
          </h1>
          <span
            style="
              margin-left: 20px;
              font-size: 14px;
              text-align: bottom;
              color: #999;
            "
          >
            {{ detailData.starUsers || 0 }}人打分
          </span>
        </div>
        <div class="title" style="margin-top: 20px">
          <h2 style="float: left; font-size: 20px">课程介绍</h2>
          <span style="margin-left: 20px; font-size: 16px; color: #999">
            |
          </span>
          <span style="margin-left: 20px; font-size: 14px; color: #999">
            讲师：<span style="color: #333"
              >{{ detailData.teacher || "暂无讲师" }}
            </span>
          </span>
          <span style="margin-left: 20px; font-size: 14px; color: #999">
            学习时长：<span style="color: #333">
              {{ detailData.docsLearningLength }}
            </span>
          </span>
          <span style="margin-left: 20px; font-size: 14px; color: #999">
            学习人数：<span style="color: #333"
              >{{ detailData.learnUsers || 0 }}人
            </span>
          </span>
          <span style="margin-left: 20px; font-size: 14px; color: #999">
            收藏：<span style="color: #333"
              >{{ detailData.favoriteCount || 0 }}人
            </span>
          </span>
        </div>
        <el-progress
          class="progress"
          type="circle"
          :stroke-width="15"
          :percentage="
            detailData.temsCourseStudyInfo
              ? detailData.temsCourseStudyInfo.process
              : 0
          "
        ></el-progress>
      </div>
      <div
        class="content3"
        v-if="
          detailData.evaluation == '1' ||
          detailData.homework ||
          detailData.homeExam
        "
      >
        <div class="title">
          <h1>课程完成条件</h1>
        </div>
        <div class="setting">
          <div class="setting-item" v-if="detailData.evaluation == '1'">
            <div class="quesition-icon"></div>
            <!--   v-if="item.chapterProgress == '100'" :checked="item.chapterProgress == '100'?true:false"
             v-if="item.isHaveHomework == '1'" :checked="item.isCompletedHomework == '1'?true:false"
              v-if="item.isHaveExam == '1'" :checked="item.isCompletedExam == '1'?true:false"
        style="width: 85px;"  v-if="item.isHaveStar == '1'" :checked="item.isCompletedStar == '1'?true:false"-->
            <div class="info">
              <div class="type">评分/评估</div>
              <div class="complete">
                <div class="scroe">
                  {{ temsFun("isCompletedStar") ? detailData.starScore : "" }}
                </div>
                <div
                  class="status"
                  :style="`color:${
                    temsFun('isCompletedStar') ? '  #44b44f' : '#ff3131'
                  }`"
                >
                  {{ temsFun("isCompletedStar") ? "已完成" : "未完成" }}
                </div>
              </div>
            </div>
            <div class="btn" v-if="!temsFun('isCompletedStar')">
              <el-button type="primary" @click="dialogVisible = true"
                >评价</el-button
              >
            </div>
          </div>
          <div class="setting-item" v-if="detailData.homework">
            <div class="quesition-icon"></div>
            <div class="info">
              <div class="type">作业</div>
              <div class="complete">
                <div
                  class="status"
                  :style="`color:${
                    temsFun('isCompletedHomework') ? '  #44b44f' : '#ff3131'
                  }`"
                >
                  {{ temsFun("isCompletedHomework") ? "已完成" : "未完成" }}
                </div>
              </div>
            </div>
            <div class="btn" v-if="!temsFun('isCompletedHomework')">
              <el-button type="primary" @click="toassignment"
                >写作业
              </el-button>
            </div>
          </div>
          <div class="setting-item" v-if="detailData.homeExam">
            <div class="quesition-icon"></div>

            <div class="info">
              <div class="type">课后考试</div>
              <div class="complete">
                <div
                  class="status"
                  :style="`color:${
                    temsFun('isCompletedExam') ? '  #44b44f' : '#ff3131'
                  }`"
                >
                  {{ temsFun("isCompletedExam") ? "已完成" : "未完成" }}
                </div>
              </div>
            </div>
            <div class="btn" v-if="!temsFun('isCompletedExam')">
              <el-button type="primary" @click="toExam">去考试</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="content4">
        <div class="left">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane name="first">
              <span slot="label" class="tabStyle"> 课程目录</span>
              <!-- 学习数据内同 -->
              <ul>
                <li
                  v-for="(item, idx) in detailData.temsCourseChapterList"
                  :class="item.name == chooseLiData.name ? 'act' : ''"
                  :key="idx"
                  @click="chooseLi(item)"
                >
                  <div class="t">第{{ idx + 1 }} 节</div>

                  <h3 class="p">
                    <i
                      class="el-icon-video-play"
                      style="float: left; font-size: 20px; margin-right: 15px"
                    ></i>
                    {{ item.name }}
                  </h3>

                  <div class="p2">
                    <span> {{ item.type }} </span>
                    <span style="margin-left: 20px">
                      <!-- 时长：15：56 -->
                    </span>
                    <span style="margin-left: 30px">
                      进度: {{ item.process || 0 }}%
                    </span>
                  </div>
                  <div
                    class="stutas"
                    :style="`color:${
                      item.process > 98 ? '#44b44f;' : '#3996fe'
                    }`"
                  >
                    <span v-if="item.process == 0 || !item.process"
                      >未开始</span
                    >
                    <span v-if="item.process > 0 && item.process < 100"
                      >学习中</span
                    >
                    <span v-if="item.process == 100">已完成</span>
                  </div>
                </li>
              </ul>

              <!-- 学习数据内容结束 -->
            </el-tab-pane>
            <el-tab-pane name="second">
              <span slot="label" class="tabStyle"> 学习情况 </span>
              <div class="ant-list">
                <div class="learnUsers" data-v-0f54d459="">
                  学习人数<span
                    style="color: rgb(187, 187, 187); margin-left: 10px"
                    data-v-0f54d459=""
                    >{{ detailData.courseStudyUserList.length }}</span
                  >
                </div>
                <div
                  class="ant-list-items"
                  v-if="detailData.courseStudyUserList"
                  v-for="(data, index) in detailData.courseStudyUserList"
                >
                  <span class="ant-list-item" data-v-0f54d459="">
                    <div class="ant-list-item-meta" data-v-0f54d459="">
                      <div class="ant-list-item-meta-avatar">
                        <el-avatar
                          :size="40"
                          :src="define.comUrl + data.headIcon"
                          class="avatar"
                        />
                      </div>
                      <div class="ant-list-item-meta-content">
                        <h4 class="ant-list-item-meta-title">
                          <span data-v-0f54d459="">{{ data.realName }}</span>
                        </h4>
                        <div class="ant-list-item-meta-description">
                          <span data-v-0f54d459=""
                            >{{ data.companyName }}/{{
                              data.organizeName
                            }}</span
                          >
                        </div>
                      </div>
                    </div>
                    <div style="color: rgb(26, 183, 0)" data-v-0f54d459="">
                      {{ data.process }}%
                    </div>
                    <!----><!----></span
                  >
                </div>
                <el-empty
                  v-else
                  description="暂无数据"
                  image="https://cdn.traingo.cn/study/img/no_data_3.4f21eb98.png"
                ></el-empty>
              </div>
              <!-- 学时内容结束 -->
            </el-tab-pane>
            <el-tab-pane name="third">
              <span slot="label" class="tabStyle"> 课程评论</span>
              <Comment :id="detailData.id" type="course" ref="comment" />
            </el-tab-pane>
            <el-tab-pane name="fourth">
              <span slot="label" class="tabStyle"> 学习资料 </span>

              <!-- <el-tooltip style="margin-left: 2px;" class="item" effect="dark"
        content="用于记录您登录、分享、评论、资源学习等产生平台活跃度的积分奖励" placement="top-start">
        <i class="el-icon-warning-outline"></i>
    </el-tooltip> -->
              <!-- <div class="link" style="line-height: 35px;" v-for=" item in detailData.temsCourseChapterList"
                :key="item.id">
                <el-link :underline="false">{{ item.name }}</el-link>
              </div> -->
              <!-- <UploadFz
                v-model="dataForm.learningMaterials"
                :fileSize="50"
                sizeUnit="MB"
                :limit="5"
                buttonText="点击上传"
              ></UploadFz> -->
              <UploadFz
                v-model="learningMaterials"
                disabled
                detailed
                :fileSize="5"
                sizeUnit="MB"
                :limit="100"
                buttonText="点击上传"
              >
              </UploadFz>

              <el-empty
                v-if="learningMaterials.length == 0"
                description="暂无学习资料"
                image="https://cdn.traingo.cn/study/img/no_data_3.4f21eb98.png"
              ></el-empty>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="right">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span
                style="
                  color: rgba(0, 0, 0, 0.85);
                  font-weight: 500;
                  font-size: 16px;
                "
                >推荐课程</span
              >
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="refList"
              >
                <i class="el-icon-refresh"></i> 刷一刷
              </el-button>
            </div>
            <div
              v-for="o in keList"
              :key="o.id"
              class="textitem"
              @click="toDetail(o.id)"
            >
              <img :src="define.APIURl + o.cover" alt="" />
              <!-- {{ '列表内容 ' + o }} -->
              <div class="textiteminfo">
                <h3>{{ o.name }}</h3>
                <p style="margin-top: 20px">学习人数：7人 {{}}</p>
                <p style="margin-top: 5px">讲师：王老师 {{}}</p>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <el-dialog title="评价" :visible.sync="dialogVisible" width="30%">
      <el-rate v-model="starScore" :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
      </el-rate>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setTemsCourseStar">确 定</el-button>
      </span>
    </el-dialog>
    <assignment
      v-if="formVisible"
      ref="assignment"
      @refresh="getD(detailData.id)"
    />
  </div>
</template>

<script>
import {
  TemsCourseDetail,
  TemsCourseList,
  TemsCourseStudy,
  TemsCourseStar,
  TemsCourseFavorite,
} from "../../api/study";
import { PreviewFile } from "@/api/common";
import countdown from "./countdown.vue";
import assignment from "./assignment";
import comment from "@/components/comment/Comment.vue";

// localPreview
export default {
  components: {
    countdown,
    assignment,
    comment,
  },
  data() {
    return {
      formVisible: false,
      dialogVisible: false,
      learningMaterials: [],
      starScore: "",
      favoriteFlag: false,
      starFlag: false,
      detailData: {
        id: "",
        cover: "",
        name: "",
        code: "",
        category: "",
        teacher: "",
        label: [],
        description: "",
        creatorUserId: "",
        creatorTime: "",
        scope: "3",
        docsLearningLength: 1,
        homework: "",
        homeExam: "",
        evaluation: "1",
        learningMaterials: [],
        learningRewards: "",
        preventionCheat: [],
        lastModifyUserId: [],
        lastModifyTime: 1,
        enabledMark: "10",
        temsCourseChapterList: [],
        temsCourseStudyInfo: {},
      },
      url: "",
      isPageActive: false,
      isshowonfirm: false,
      chooseLiData: {},
      activeName: "first",
      keList: [],
      search: {
        currentPage: 1,
        pageSize: 6,
        sidx: "",
        sort: "desc",
      },
      historyTime: 0,
      duration: 0, //需要学习时长
      totalduration: 0, //总时长
      timer: 0, // 刷新进度最低 间隔秒数
      handleVisibilityChangeNum: 0, //切屏次数
      preventionHpMinute: 0,
      preventionHpMinuteT: 0,
      listQ: {},
    };
  },
  created() {
    this.getD();
    this.getList();

    //  console.log('this.$route',this.$route)
  },
  mounted() {
    //切换方法
    document.addEventListener("visibilitychange", this.handleVisibilityChange);
  },

  methods: {
    handleStarClick(type) {
      TemsCourseFavorite(
        type,
        this.detailData.id,
        this.detailData.name,
        this.detailData.cover
      ).then((res) => {
        let message = "";
        if (type == "like") {
          if (this.detailData.likeFlag) {
            message = "取消点赞成功";
          } else {
            message = "点赞成功";
          }
          this.detailData.likeFlag = !this.detailData.likeFlag;
        }
        if (type == "favorite") {
          if (this.detailData.favoriteFlag) {
            message = "取消收藏成功";
          } else {
            message = "收藏成功";
          }
          this.detailData.favoriteFlag = !this.detailData.favoriteFlag;
        }
        this.$message({
          message: message,
          type: "success",
          duration: 1000,
          onClose: () => {
            this.visible = false;
          },
        });
      });
    },
    SetpreventionHpMinute() {
      //防挂机

      setInterval(() => {
        this.preventionHpMinute = this.preventionHpMinute + 1;
        if (this.preventionHpMinute == this.preventionHpMinuteT) {
          if (
            this.chooseLiData.type == "video/mp4" ||
            this.chooseLiData.type == "video/mp3"
          ) {
            this.$refs.video.pause();
            // console.log('暂停了么？？？', this.$refs.video)
          } else {
            this.$refs.countdown.clearTimer();
          }
          this.$confirm("已暂停学习，请点击确认继续学习？", "放挂机监测", {
            distinguishCancelAndClose: true,
            confirmButtonText: "确认",
            cancelButtonText: "不学习",
          })
            .then(() => {
              this.preventionHpMinute = 0;

              if (
                this.chooseLiData.type == "video/mp4" ||
                this.chooseLiData.type == "video/mp3"
              ) {
                this.$refs.video.play();
              } else {
                this.$refs.countdown.startCountdown();
              }
            })
            .catch((action) => {
              this.preventionHpMinute = 0;
            });
        }
      }, 1000);
    },
    toassignment() {
      console.log(" this.detailData., this.detailData", this.detailData);
      this.formVisible = true;
      this.$nextTick(() => {
        this.detailData.homework.studyId =
          this.detailData.temsCourseStudyInfo.id;
        this.$refs.assignment.init(this.detailData.homework, false);
      });
    },
    toExam() {
      console.log("sss");
      this.$router.push(
        `/examWeb/index?id=` +
          this.detailData.homeExam +
          `&&courseId=` +
          this.detailData.id
      );
    },
    addPro(v) {
      //增加进度

      if (this.timer < 4 && v != 0) {
        this.timer = this.timer + 1;
        // console.log('this.timer', this.timer)

        return;
      } else {
        if (this.detailData.id) {
          this.timer = 0;
          // 获取最新进度 1S一次
          var newPro = Math.ceil(
            ((this.totalduration - v) / this.totalduration) * 100
          );
          var nowPro = this.chooseLiData.process || 0;
          // 判断进度更新是否超过百分之一
          if (newPro - nowPro > 1 || newPro - nowPro == 1) {
            this.study(this.chooseLiData.id, newPro);
          }
        }
      }
      //传回时间
    },
    temsFun(key) {
      if (
        this.detailData.temsCourseStudyInfo &&
        this.detailData.temsCourseStudyInfo[key] == "1"
      ) {
        return true;
      } else {
        return false;
      }
    },

    toDetail(id) {
      if (!id) {
        return;
      }

      this.getD(id);
    },
    initVideo() {
      var video = this.$refs.video;
      // video.currentTime = 10
      // console.log('video', video)
      video.addEventListener("loadedmetadata", (e) => {
        console.log("提示视频的元数据已加载");
        var time = e.srcElement.duration;
        var process = this.chooseLiData.process || 0;
        this.totalduration = time;
        var nowTime = Math.floor((time * process) / 100);
        // var nowTime = 0
        // if(video)
        video.currentTime = nowTime;
        this.duration = Math.floor(time - nowTime);
        if (this.$refs.countdown) {
          this.$refs.countdown.settype();
        }
        // console.log(video)            // NaN
      });

      video.addEventListener("timeupdate", (e) => {
        var nowtime = e.srcElement.currentTime;
        if (this.detailData.preventionDpb != 1) {
          if (
            nowtime - this.historyTime > 1 &&
            this.historyTime != 0 &&
            this.chooseLiData.process != 100
          ) {
            this.$message.warning("不可快进观看!");
            video.currentTime = this.historyTime;
            return;
          }
        }

        this.historyTime = nowtime;
        var newTime = Math.floor(this.totalduration - nowtime);

        if (this.duration - newTime == 1 || this.duration - newTime > 1) {
          this.duration = newTime;

          this.addPro(this.duration);
        }
      });
    },
    getList() {
      TemsCourseList(this.search).then((res) => {
        this.keList = res.data.list;

        this.listQ = { ...res.data.pagination };
      });
    },
    //评分接口
    setTemsCourseStar() {
      this.dialogVisible = false;
      TemsCourseStar(
        this.detailData.temsCourseStudyInfo.id,
        this.starScore
      ).then((res) => {
        this.getD(this.detailData.id);
        // this.getD()
      });
    },
    //开始学习或更新学习进度  这个接口只返回chapterId 的数据好点
    study(chapterId, process) {
      TemsCourseStudy(chapterId, process).then((res) => {
        // this.detailData = res.data
        this.$set(
          this.detailData,
          "temsCourseChapterList",
          res.data.temsCourseChapterList
        );

        // console.log()
        this.$set(
          this.detailData,
          "temsCourseStudyInfo",
          res.data.temsCourseStudyInfo
        );
        if (process == 100) {
          this.chooseLiData.process = 100;
        }
      });
    },

    refList() {
      if (this.search.currentPage * 6 < this.listQ.total) {
        this.search.currentPage = this.search.currentPage + 1;
      } else {
        this.search.currentPage = 1;
      }

      this.getList();
    },
    goback() {
      this.$router.go(-1);
    },
    //选择视频方法
    chooseLi(item) {
      this.chooseLiData = { ...item };
      // this.study(item.id, item.process)

      var type = item.name.split(".")[1];
      if (item.type == "音频" || item.type == "视频") {
        this.chooseLiData.url = this.define.APIURl + item.url;
        this.chooseLiData.type = "video/" + type;
        this.$nextTick(() => {
          if (this.$refs.video) {
            this.$refs.video.src = this.chooseLiData.url;
            this.initVideo();
          } else {
            // this.initVideo()
          }
        });
      } else {
        let file = JSON.parse(item.fileJson);
        const query = {
          fileName: file.fileId,
          fileVersionId: file.fileVersionId,
          fileDownloadUrl: file.url,
          secondFilePath: file.secondFilePath,
        };
        PreviewFile(query).then((res) => {
          this.chooseLiData.type = "ifram";
          this.chooseLiData.url = res.data;
        });

        //时间逻辑
        if (this.detailData.docsLearningLength) {
          var process = item.process || 0;
          if (process == 100) {
            return;
          }

          this.totalduration = this.detailData.docsLearningLength;

          var nowTime = Math.floor((this.totalduration * process) / 100);
          this.duration = Math.floor(this.totalduration - nowTime);

          console.log(
            "this.detailData.docsLearningLength",
            this.detailData.docsLearningLength,
            this.totalduration,
            process,
            nowTime
          );
          this.$nextTick(() => {
            this.$refs.countdown.startCountdown();
          });
        } else {
          this.study(item.id, 100);
        }
      }
    },

    getD(id) {
      TemsCourseDetail(id ? id : this.$route.query.id).then((res) => {
        this.detailData = res.data;
        this.chooseLi(res.data.temsCourseChapterList[0]);

        // console.log(' this.learningMaterials', this.learningMaterials)
        this.learningMaterials = JSON.parse(this.detailData.learningMaterials);
        if (this.detailData.preventionHp == 1) {
          this.preventionHpMinuteT = this.preventionHpMinute * 60;
          this.SetpreventionHpMinute();
        }
      });
    },
    handleClick() {},
    onRateChange(e) {
      //播放速度不可倍速
      // console.log('eeeeeeeeeeeee',e)
      if (this.detailData.preventionDsp != "1") {
        this.$message.warning("不可调节倍速!");
        if (this.$refs.video.playbackRate !== 1.0) {
          this.$refs.video.playbackRate = 1.0;
        }
      }
    },
    handleVisibilityChange() {
      if (this.chooseLiData.process == 100) {
        return;
      }
      if (this.isshowonfirm) {
        return;
      }
      this.isPageActive = !document.hidden;
      if (this.isPageActive) {
        // 页面变为活跃状态时的处理逻辑
        // console.log('jinlai')
        this.isshowonfirm = true;
        this.$confirm("已暂停学习，是否继续学习？", "学习提示", {
          distinguishCancelAndClose: true,
          confirmButtonText: "确认",
          cancelButtonText: "不学习",
        })
          .then(() => {
            this.isshowonfirm = false;
            if (
              this.chooseLiData.type == "video/mp4" ||
              this.chooseLiData.type == "video/mp3"
            ) {
              this.$refs.video.play();
            } else {
              this.$refs.countdown.startCountdown();
            }
          })
          .catch((action) => {});
      } else {
        this.handleVisibilityChangeNum++; //统计次数
        // console.log(this.chooseLiData)
        if (
          this.chooseLiData.type == "video/mp4" ||
          this.chooseLiData.type == "video/mp3"
        ) {
          this.$refs.video.pause();
          // console.log('暂停了么？？？', this.$refs.video)
        } else {
          this.$refs.countdown.clearTimer();
        }

        // 页面变为非活跃状态时的处理逻辑
      }
    },
  },

  beforeDestroy() {
    // 移除监听器
    document.removeEventListener(
      "visibilitychange",
      this.handleVisibilityChange
    );
  },
};
</script>

<style lang="scss" scoped>
.md-1 {
  position: relative;
  background: #191b1f;
  width: 100%;
  height: 715px;
  color: #ccc;

  .content {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;

    .top {
      margin: 5px 0;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      align-self: center;
      font-size: 14px;
    }

    .playArea {
      height: 562px;

      .right {
        overflow-y: auto;
        float: left;
        width: 310px;
        height: 100%;
        background: #2d2d2d;
        border-right: 1px solid #2d2d2d;
        border-top: 1px solid #2d2d2d;
        border-bottom: 1px solid #2d2d2d;

        li {
          padding: 11px 10px 11px 10px;
          position: relative;
          overflow: hidden;
          height: 70px;
          width: 100%;
          border-bottom: 1px solid #333;
          cursor: pointer;
          font-size: 14px;
          // line-height: 30px;

          .p {
            color: #999;
            font-size: 16px;
            margin: 0 0 8px 0;
            font-weight: 400;
            line-height: 22px;
            min-height: 22px;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            overflow: hidden;
          }

          .p2 {
            margin-left: 36px;
            color: #666;
            font-size: 12px;
          }
        }

        .act {
          background: #1e1e1e;
        }
      }

      .left {
        position: relative;
        float: left;
        width: 890px;
        height: 100%;
        background: #090909;
      }
    }
  }
}

.md-2 {
  margin-top: -60px;

  .content2 {
    background: #fff;
    border-radius: 4px;
    padding: 30px 150px 30px 30px;
    width: 1200px;
    margin: 0px auto;
    position: relative;
    // top: -63px;
    height: 200px;
    margin-bottom: 40px;

    h1 {
      margin: 0;
    }

    .title {
      line-height: 30px;
    }

    .progress {
      position: absolute;
      right: 20px;
      top: 30px;
    }
  }

  .content3 {
    padding: 30px;
    width: 1200px;
    min-height: 100px;
    margin: 0 auto;
    margin-bottom: 40px;
    background: #fff;
    border-radius: 8px;

    .title {
      line-height: 30px;
    }
  }

  .setting {
    display: flex;
    // justify-content: unset;
    justify-content: left;
    align-items: unset;
    flex-direction: row;

    .setting-item {
      width: 366px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;
      min-height: 88px;
      padding: 20px 94px 20px 12px;
      margin-left: 20px;
      background-color: #f8f8f8;
      border-radius: 8px;

      .quesition-icon {
        width: 48px;
        height: 48px;
        margin-right: 10px;
        background: url("https://cdn.traingo.cn/study/img/quesition-icon.4c6d313c.png")
          no-repeat;
        background-size: 100% 100%;
      }

      .info {
        flex: 1;
        font-size: 14px;

        .type {
          margin-bottom: 6px;
          color: #333;
        }

        .complete {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: row;
          line-height: 20px;

          .scroe {
            margin-right: 12px;
            font-weight: 700;
            color: #44b44f;
          }

          .status {
            color: #44b44f;
            margin-right: 12px;
            font-weight: 550;
          }
        }
      }

      .btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 12px;
        width: 72px;
        z-index: 2;
      }
    }
  }

  .content4 {
    display: flow-root;
    position: relative;
    width: 1200px;
    margin: 0 auto;
    min-height: 300px;

    .ant-list {
      .learnUsers {
        font-size: 14px;
        margin-bottom: 10px;
      }
      .ant-list-items {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .ant-list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        color: rgba(0, 0, 0, 0.85);
        border-bottom: 1px solid #f0f0f0;
      }
      .ant-list-item-meta {
        display: flex;
        flex: 1;
        align-items: flex-start;
        max-width: 100%;
      }
      .ant-list-item-meta-avatar {
        margin-right: 16px;
      }
      .ant-list-item-meta-content {
        flex: 1 0;
        width: 0;
        color: rgba(0, 0, 0, 0.85);
      }
      .ant-list-item-meta-title {
        margin-bottom: 4px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        line-height: 1.5715;
      }
      .ant-list-item-meta-description {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        line-height: 1.5715;
      }
    }
    .left {
      float: left;
      width: 890px;
      min-height: 627px;
      padding: 10px 30px 30px;
      background: #fff;
      border-radius: 4px;
      margin-bottom: 30px;

      li {
        .t {
          cursor: pointer;
          margin-top: 4px;
          font-size: 15px;
          color: #202020;
          position: absolute;
          top: 20px;
          left: 15px;
        }

        padding: 20px 105px 20px 90px;
        background: #f5f5f6;

        position: relative;
        overflow: hidden;
        height: 92px;
        width: 100%;
        // border-bottom: 1px solid #333;
        cursor: pointer;
        font-size: 14px;
        // line-height: 30px;

        .p {
          // color: #999;
          font-size: 16px;
          margin: 0 0 8px 0;
          font-weight: 400;
          line-height: 22px;
          min-height: 22px;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          overflow: hidden;
        }

        .p2 {
          // margin-left: 36px;
          color: #999;
          font-size: 14px;
          line-height: 30px;
        }
      }

      .stutas {
        font-size: 16px;
        position: absolute;
        top: 20px;
        right: 24px;
        color: #d8d8d8;
        text-align: right;
      }
    }

    .right {
      float: right;
      width: 290px;
      background: #fff;
      border-radius: 4px;

      .textitem {
        cursor: pointer;
        display: block;
        position: relative;
        margin-bottom: 20px;
        width: 120px;
        height: 70px;

        img {
          position: absolute;
          width: 120px;
          height: 68px;
          border-radius: 4px;
        }

        .textiteminfo {
          // padding-left: 128px;
          color: #202020;
          margin-left: 128px;
          // width: ;
          width: 100%;

          h3 {
            color: #333;

            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            overflow: hidden;
          }

          p {
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
